<template>
  <div class="wrap">
  	<!-- header -->
  	<header-v></header-v>
  	
  	<!-- content -->
  	<div class="index-content">
			<div class="server">
				<ul>
					<li><strong> 01 </strong><router-link to="/">面部护理</router-link></li>
					<li><strong> 02 </strong><router-link to="/">唇彩唇线</router-link></li>
					<li><strong> 03 </strong><router-link to="/">特殊用途</router-link></li>
					<li><strong> 04 </strong><router-link to="/">化妆用具</router-link></li>
					<li><strong> 05 </strong><router-link to="/">眉眼修饰</router-link></li>
					<li><strong> 06 </strong><router-link to="/">男士系列</router-link></li>
				</ul>
			</div>
			<div class="product">
				<div class="title">
					<img src="../assets/bcfq.png" />
					<p>NEW PRODUCTS</p>
					<router-link to="/">最新产品</router-link>
				</div>
				<div class="product_content">
					<grid :rows="2">
						<grid-item :label="'纷泽滋润唇膏巨星私藏系'" link="/" >
							<img slot="icon" src="../assets/51_alrm.jpg" alt="纷泽滋润唇膏巨星私藏系" />
							<span class="money">160.00</span>
						</grid-item>
						<grid-item :label="'流光炫色唇彩'" link="/" >
							<img slot="icon" src="../assets/51_f9g4.jpg" alt='流光炫色唇彩' />
							<span class="money">280.00</span>
						</grid-item>
					</grid>
					<grid :rows="2">
						<grid-item :label="'眉眼造型套盒'" link="/" >
							<img slot="icon" src="../assets/50_rit7.jpg" alt="眉眼造型套盒" />
							<span class="money">170.00</span>
						</grid-item>
						<grid-item :label="'无限深活明肌角质精华液'" link="/" >
							<img slot="icon" src="../assets/49_x7id.jpg" alt='无限深活明肌角质精华液' />
							<span class="money">220.00</span>
						</grid-item>
					</grid>
					<router-link to="/proList" title="更多产品" class="btn">更多产品</router-link>
				</div>
			</div>
	
			<div class="about">
				<div class="title">
					<img src="../assets/bcfq.png" />
					<p>COMPANY PROFILE</p>
					<router-link to="/">公司简介</router-link>
				</div>
				<div class="about_content">
					<img src="../assets/rn6i.jpg" />
					<p>XXXXXXX发展有限公司成立于1998年，集美丽与智慧于一身的企业掌门人XXX高瞻远瞩，运筹帷幄，创业至今，始终坚持以市场需求为导向来谋求企业</p>
					<p>发展，以选培优秀人才为根本来做强做大事业，以</p>
				</div>
				<router-link to="/about" title="更多介绍" class="btn">更多介绍</router-link>
			</div>
			
			<div class="news">
				<div class="title">
					<img src="../assets/bcfq.png" />
					<p>NEWS INFORMATION</p>
					<router-link to="/">最新资讯</router-link>
				</div>
				<div class="news_content">
					<ul>
						<li>
							<div class="pic">
								<img src="../assets/1(3)_hem7.jpg" alt="巴黎欧莱雅绝配无瑕粉底霜全新上" />
							</div>
							<div class="content">
								<p class="con_title"><router-link to="/">巴黎欧莱雅绝配无瑕粉底霜全新上......</router-link></p>
								<p class="time">2014-12-04</p>
								<p class="abstract">打造纯净质感 又富有生机活力的底妆，是呈现完美彩妆的第一步。......</p>
							</div>
						</li>
						<li>
							<div class="pic">
								<img src="../assets/1(5)_o3t8.jpg" alt="Guerlain限量珍藏最贵唇" />
							</div>
							<div class="content">
								<p class="con_title"><router-link to="/">Guerlain限量珍藏最贵唇......</router-link></p>
								<p class="time">2014-12-04</p>
								<p class="abstract">因为对美和优雅的一种热切无惧之追求，Guerlain特别推出......</p>
							</div>
						</li>
						<li>
							<div class="pic">
								<img src="../assets/1(4)_azrm.jpg" alt="魔幻色彩—粉红佳人系列隆重上市" />
							</div>
							<div class="content">
								<p class="con_title"><router-link to="/">魔幻色彩—粉红佳人系列隆重上市</router-link></p>
								<p class="time">2014-12-04</p>
								<p class="abstract">自从今年年初推出了魔幻色彩MYBELIVE以来，受到了广大客......</p>
							</div>
						</li>
					</ul>
					<router-link to="/newsList" title="更多资讯" class="btn">更多资讯</router-link>
				</div>
			</div>
	
			<div class="contact">
				<div class="title">
					<img src="../assets/bcfq.png" />
					<p>CONTACT US</p>
					<router-link to="/">联系我们</router-link>
				</div>
				<div class='contact_content'>
					<form action="/" method="post">
						<div class="row">
							<span>您的称呼</span>
							<input type="text" name="fullname" />
						</div>
						<div class="row">
							<span>联系方式</span>
							<input type="text" name="mobile" />
						</div>
						<div class="row">
							<span>留言内容</span>
							<textarea row="5"></textarea>
						</div>
						<div class="ibtn">
							<input type="submit" value="提交" />
						</div>
					</form>
				</div>
			</div>
  	</div>
  	
  	<!-- footer -->
  	<footerV></footerV>
  </div>
</template>

<script>
import header from './public/header'
import footer from './public/footer'
import { Grid, GridItem } from 'vux'

export default {
	components: {
		headerV : header, footerV : footer, Grid, GridItem
	},
	data () {
		return {
		}
	},
	methods : {
  
	}
}
	
</script>


<style type="text/css">
	/* index.style */
	
	.index-content .title{text-align:center; margin:0.2rem 0 0.2rem 0;}
	.index-content .title p{color:#f55e6a; font-size:0.18rem; font-weight:bold; line-height:0.2rem;}
	.index-content .title img{width:100%;}
	.index-content .title a{font-size:0.2rem; font-weight:bold; color:#282828;}
	.index-content .server{padding:0.2rem; overflow:hidden;}
	.index-content .server li{background:url('../assets/y6i5.png') center center no-repeat; width:1.3rem; height:1.6rem; float:left; display:block; margin-bottom:0.2rem; background-size:100% 100% !important; text-align:center;}
	.index-content .server li:nth-of-type(odd){margin:0 0.2rem 0.2rem 0;}
	.index-content .server li strong{color:#fff; font-size:0.24rem; display:block; margin-top:0.4rem;}
	.index-content .server li a{color:#282828; font-size:0.18rem; font-weight:bold; margin-top:0.2rem; display:block;}

	.product{width:100%;}
	.product .weui-grids .weui-grid{padding:0 !important; width:47% !important;text-align:center;}
	.product .weui-grids a:nth-of-type(1n){margin-left:0.03rem;}
	.product .weui-grids a:nth-of-type(2n){margin-left:0.126rem;}
	.product .weui-grid__icon{height:1.48rem !important; width:100% !important; margin:0 !important;}
	.product .weui-grid__label span{color:#5a5a5a; font-size:0.12rem; font-weight:bold;}
	.vux-slider .vux-indicator a .vux-icon-dot{width:0.06rem !important; height:0.06rem !important; border-radius:0.04rem;}
	.product .weui-grid .money{color:#f55e6a; font-weight:bold; margin-bottom:0.1rem; display:block;}
	.index-content .btn{border:0.01rem solid rgba(238,238,238,1); display:block; margin:0.2rem auto; line-height:0.3rem; color:#282828; font-weight:bold; width:1.52rem; height:0.3rem; text-align:center; -webkit-transition:0.2s; transition:0.2s;}
	.index-content .btn:hover{border-color:#f55e6a; color:#f55e6a;}

	.about_content img{width:100%; margin-bottom:0.5rem;}
	.about_content p{font-size:0.14rem; color:#5a5a5a; line-height:0.25rem; margin:0 0.06rem;}
	.about_content p:nth-of-type(2){margin:0.2rem 0.06rem;}

	.news_content .pic{width:32%; float:left;}
	.news_content .content{width:68%; float:left;}
	.news_content .pic img{width:0.9rem; height:0.9rem;}
	.news_content li{padding:0.12rem 0.05rem; border-bottom:0.01rem solid #e2e2e2; overflow:hidden;}
	.news .con_title a{font-weight:bold; color:#5a5a5a; line-height:0.25rem;}
	.news .time,.news .abstract{color:#929292;}

	.contact_content{padding:0 0.1rem 0.4rem 0.1rem;}
	.contact .row{height:0.32rem; margin:0.15rem 0; width:100%;}
	.contact .row span{color:#5a5a5a; width:0.7rem; display:block; float:left; padding-top:0.07rem;}
	.contact .row input,textarea{height:0.32rem; outline:none; border:0.01rem solid #dedede; background:#f7f7f7; border-radius:0.03rem; width:2.2rem; text-indent:0.05rem; font-size:0.12rem;}
	.contact .row textarea{height:0.7rem;resize: vertical;}
	.contact .ibtn{clear:both; margin-top:0.52rem; margin-left:0.7rem;}
	.contact .ibtn input{width:2.2rem; height:0.4rem; background:#f55e6a; font-weight:bold; border-radius:0.03rem; line-height:0.4rem; color:#fff; text-align:center; border:none; outline:none; font-size:0.12rem; cursor:pointer;}
	.contact .ibtn input:hover{color:#ed2030;}
</style>


































